<template>
    {{ form }}
    <h2>级联知识点</h2>
    <div class="m-4">
        <p>Child options expand when clicked (default)</p>
        <el-cascader v-model="form.JilianValue" :options="options" :props="cascaderProps" @change="handleChange" />
    </div>


    <h2>Tree树形知识点</h2>
    <el-input v-model="filterText" style="width: 240px" placeholder="Filter keyword" />

    <el-tree style="max-width: 600px" :data="options" :props="defaultProps" default-expand-all
        :filter-node-method="filterNode" @node-click="nodeClick" />


</template>

<script setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';


const setData = () => {
    axios.get('http://localhost:5071/api/Department/GetTree', { params: null }).then(res => {
        options.value = res.data.data
    });
}

//tree树形控件
//四个参数：对应于节点点击的节点对象，TreeNode 的 node 属性, TreeNode和事件对象
const nodeClick = (node) => {
    console.log(node);
    alert(node.departName);
    alert(node.id);
}

const filterText = ref('')


const defaultProps = {
    children: 'children',
    label: 'departName',
    id: 'value'
}

//级联

const cascaderProps = {
    value: 'id',
    label: 'departName'
}
const handleChange = (value) => {
    console.log(value)
    alert(value[value.length - 1]);
    form.JilianValue = value[value.length - 1];
}
const form = reactive({
    JilianValue: ''
})

const options = ref([])

onMounted(() => { setData(); })
</script>